<template>
  <div id="map">

  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl' // or "const mapboxgl = require('mapbox-gl');"
import 'mapbox-gl/dist/mapbox-gl.css'

export default {
  mounted() {
    mapboxgl.accessToken =
      'pk.eyJ1Ijoic2FnaXQtemgiLCJhIjoiY2t0bno1cGp6MDdxNjJubGdzZHQxOTVtaiJ9.shmGZyFnHkC2rc5d5dHgBA'
    const map = new mapboxgl.Map({
      container: 'map', // container ID
      style: 'mapbox://styles/mapbox/dark-v10', // style URL
      zoom: 10, // starting zoom
      center: [122, 31], // starting position
    })

    map.on('load', () => {
      // Load an image from an external URL.
      /* 1. 加载图片 */
      map.loadImage(
        'https://docs.mapbox.com/mapbox-gl-js/assets/cat.png',
        (error, image) => {
          if (error) throw error // 抛出错误

          // Add the image to the map style.
          /* 2. 添加图片 */
          map.addImage('cat', image)

          // Add a data source containing one point feature.
          /* 3. 添加数据 source */
          map.addSource('point', {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: [
                {
                  type: 'Feature',
                  geometry: {
                    type: 'Point',
                    coordinates: [-77.4144, 25.0759],
                  },
                },
              ],
            },
          })

          // Add a layer to use the image to represent the data.
          /* 4. 添加图层 */
          map.addLayer({
            id: 'points',
            type: 'symbol',
            source: 'point', // 对应第三步
            layout: {
              'icon-image': 'cat', // 对应第二步
              'icon-size': 0.25,
            },
          })
        }
      )
    })
  },
}
</script>

<style  scoped>
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>